<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>position demo</title>
  <style>
  img{
    border:none;
  }
  ul{
    overflow: hidden
  }
   ul li{
    list-style: none;
    float: left;
    *display: inline;
    margin:10px;
   }
   ul li img{
    /*display: block;*/
    width: 200px;
    height: 200px;
   }
   #tooltip{
    position: absolute;
    display: none;
   }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
   
<ul>
<li><a href="img/pic1.png" class="tooltip" title="bug1"><img src="img/pic1.png"></a></li>
<li><a href="img/pic2.png" class="tooltip" title="bug2"><img src="img/pic2.png"></a></li>
<li><a href="img/pic3.png" class="tooltip" title="bug3"><img src="img/pic3.png"></a></li>
</ul> 
<p></p>
<script>
$(".tooltip").mouseover(function(e){
  // if($("#tooltip")){return;}
/*  var $img = $(this).find("img");
  var x = $img.position().left;
  var y = $img.position().top;
  var xx = x + $img.width();
  var yy = y + $img.height();
  $("p:last").html("x="+x+",y="+y+"<br/> xx="+xx+",yy="+yy);
*/
  // if(e.pageY>y && e.pageY<yy && e.pageX>x && e.pageX<xx){
    if($("#tooltip").length > 0) return;
    this.myTitle = this.title;
    this.title = "";
    var imgTitle = this.myTitle ? "<br />" + this.myTitle : "";
    var tooltip = "<div id='tooltip'><img src='"+this.href+"' alt='preview'>"+imgTitle+"</div>";
    $("body").append(tooltip);
    $("#tooltip")
    .css({
      "top":e.pageY+"px",
      "left":e.pageX+"px"
    }).show("fast");
  // }
  
  
}).mouseout(function(e){
  this.title = this.myTitle;
  $("#tooltip").remove();
}).mousemove(function(e){
  $("#tooltip").css({
    "top":e.pageY+"px",
    "left":e.pageX+"px"
  });
});
</script>
</body>
</html>